<template>
	<div class="table-block">
    <div class="title" :class="titleType" v-if="isTitle">{{ title }}</div>
		<el-table
			:data="oprData.list"
			style="width: 100%"
			:height='height'
			:size="size"
			:row-style="rowStyle"
			:cell-style="cellStyle"
			:header-cell-style="headRowStyle"
			@cell-click="toPath">
			<el-table-column
				v-for="(item,index) in oprData.tableData"
				v-if="item.isShow!==0"
				:key="index"
				:prop="item.field"
				:label="item.name"
				:width="item.width"
				align="center"
				>
			</el-table-column>
		</el-table>
		<PageFull v-if="isPageFull" :pageSize="pageSize" :total="total" @currentChange="currentChange" :layout="layout" :align="align" :currePage="currePage"></PageFull>
	</div>
</template>

<script>
	import PageFull from '@/components/pageFull-block.vue'
	export default{
		components:{PageFull},
		props:{
			oprData:{//表头和表格数据
				type:Object
			},
			height:{//高度
				type:String,
			},
			size:{//表格size
				type:String,
				default:'mini'
			},
			isPageFull:{//是否需要分页
				type:Boolean,
				default:true
			},
			pageSize:{//分页每页数据条数
				type:Number,
				default:4
			},
			total:{//数据总条数
				type:Number,
				default:10,
			},
			layout:{//分页可见组件，可选值sizes, prev, pager, next, jumper, ->, total, slot
				type:String,
				default:'prev, pager, next'
			},
			align:{
				type:String,
				default:'right'
			},
			currePage:{
				type:Number,
				default:1
			},
      title: {
        type: Boolean,
        default: false
      },
      isTitle: {
        type: Boolean,
        default: false
      },
      titleType: {
        type: String, //标题类型，blueSmall,blueBig,greenSmall,greenBig，设计图上有不同颜色和尺寸的，暂时没法切图，等有了图补上样式
        default: "blueSmall"
      },
		},
		data(){
			return {

			}
		},
		methods:{
			rowStyle({row, rowIndex}){
				let styleJson = {}
				if (rowIndex%2==0) {
					// styleJson = {'background':'rgba(0,16,75,.3)','color':'#fff'}
					styleJson = {'background':'#03454c','color':'#fff'}
				} else{
					// styleJson = {'background':'rgba(0,32,194,.3)','color':'#fff'}
					styleJson = {'background':'#00262d','color':'#fff'}
				}
				return styleJson
			},
			cellStyle({row, column, rowIndex, columnIndex}){
				// return 'border-color:#336bce;padding:4px 0'
				return 'border-color:transparent;padding:4px 0'
			},
			headRowStyle({row, rowIndex}){
				let styleJson = {}
				// return {'background':'rgba(0,36,255,.7)','color':'#fff','border':'0'}
				return {'background':'#068c91','color':'#fff','border':'0'}
			},
			currentChange(e){
				this.$emit('currentChange',e)
			},
			toPath(row, column, cell, event){
				this.$emit('cellClick',{row, column, cell, event})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.table-block{
		border:none;
		/deep/ {
		  .el-table {
		    tbody tr {
		      &:hover {
		        td {
		          background-color: #4dcad0
		        }
		      }
		    }
		  }
		}
		/deep/{
			.el-table--mini,.el-table--small{
				background: none;
			}
		}
		/deep/{
			.el-table::before {
			    height: 0px;
			 }
		}
		/deep/{
			.el-table th, .el-table tr{
				background: none;
			}
		}
		/deep/{
			.el-table .cell{
				cursor: pointer;
			}
		}
    .title {
      max-width: 40%;
      height: 3.98vh;
      margin-top: -1px;
      margin-bottom: 10px;
      padding-left: 1vw;
      line-height: 3.98vh;
      color: #FFFFFF;
      font-size: 0.94vw;
      font-weight: bold;
      text-align: left;

      &.blueSmall {
        // background: url("../assets/images/chart_block_title_blue_sm.png") top center no-repeat;
        background: url("../assets/images/title-bg.png") top center no-repeat;
        background-size: 100% 100%;
      }
      &.blueBig {
        // background: url("../assets/images/chart_block_title_blue_big.png") top center no-repeat;
        background: url("../assets/images/title-bg.png") top center no-repeat;
        background-size: 100% 100%;
      }

      &.moreBlueBig {
        // background: url("../assets/images/chart_block_title_blue_more_big.png") top center no-repeat;
        // background-size: contain;
        background: url("../assets/images/title-bg.png") top center no-repeat;
        background-size: 100% 100%;
      }

      &.greenSmall {

      }

      &.greenBig {

      }
    }
	}
</style>
